<!DOCTYPE html>
<html lang="zh-CN" xml:lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>JxtPro</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- <link rel="stylesheet" href="/jfinalLayuiUpload/assets/layui/css/layui.css"> -->
		<link rel="stylesheet" href="/assets/layui/css/layui.css">
	</head>
	<body>
		
		<button type="button" class="layui-btn" id="test1">
		  <i class="layui-icon">&#xe67c;</i>上传图片
		</button>
		<div id="result"></div>
		
		<button type="button" class="layui-btn" id="submit">
		  <i class="layui-icon">&#xe67c;</i>提交图片
		</button>
		<!-- /jfinalLayuiUpload 根据自己的项目名做替换 tomcat下多个项目时-->
		<!-- <script src="/jfinalLayuiUpload/assets/layui/layui.js"></script> -->
		<script src="/assets/layui/layui.js"></script>
		<script>
			layui.use(['upload','jquery','layer'], function(){
				var _parse=JSON.parse;
				JSON.parse=function(param){
				if (typeof param === 'string') return _parse(param);
					return param;	
				}
				
			  var upload = layui.upload;
			  var $ = layui.jquery;
			  var layer = layui.layer;
			  //执行实例
			  var uploadInst = upload.render({
			    elem: '#test1' //绑定元素
			    ,url: '/upload/upload' //上传接口
			    ,method:'post'
			    ,done: function(res, index, upload){
			      //上传完毕回调
			      console.log(res);
			      if(res.code == 0){
			    	  layer.msg(res.msg);
			      }
			    }
			    ,error: function(res){
			      //请求异常回调
			    	  console.log(JSON.stringify(res));
			    },
			    auto:false,
			    bindAction:"#submit"
		    	,choose: function(obj){
		    	    //将每次选择的文件追加到文件队列
		    	    var files = obj.pushFile();
		    	    
		    	    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
		    	      obj.preview(function(index, file, result){
		    	      //这里还可以做一些 append 文件列表 DOM 的操作
		    	      $('#result').append('<img alt="" src="'+result+'" onclick="remove('+index+')">');
		    	      //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
		    	      //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
		    	    });
	    	    }
			  });
			});
			
			function remove(index){
				delete files[index]; 
			}
			
			//一般直接写在一个js文件中
			layui.use(['layer', 'form'], function(){
			  var layer = layui.layer
			  ,form = layui.form;
			  
			});
		</script>
	</body>
</html>
